<template>
	<view>
<!--    搜索框，功能暂未实现--> 
		<input type="text" class="search"  placeholder="请输入考试名称" @keydown.enter="searchTestList" v-model="testName" />
<!--    v-for循环遍历将所有考试信息显示-->
    <view
        v-for="(item,index) in testLists"
        :key="index">
      <view class="testInformation" @click="clickTestList(item)">
  <!--      引入一个已完成的图标-->

<!--        未开始和进行中状态-->
        <view
            v-if="item.testStatus==0"
            class="hadComplete">
          <img src="static/icons/waitComplete.png">
        </view>

<!--          未批改状态-->
        <view
            v-if="item.testStatus==1"
            class="hadComplete">
          <img src="static/icons/hadFinished.png">
        </view>
<!--        已批改状态-->
        <view
            v-if="item.testStatus==2"
            class="hadComplete">
          <img src="static/icons/waitComplete.png">
        </view>
  <!--      渲染上考试时间和考试名-->
        <view class="testNameAndTime">
          <view>{{item.testName}}</view>
          <view>{{item.beginTime}}</view>
        </view>
  <!--      是否结束-->
        <view
            v-if="item.testStatus==0"
            class="isFinished">待开始
        </view>
        <view
            v-if="item.testStatus==1"
            class="isFinished">未批改
        </view>
        <view
            v-if="item.testStatus==2"
            class="isFinished">已批改
        </view>
      </view>
<!--      一个虚线的分割线-->
      <u-line color="rgb(236, 240, 241)" />
  </view>
<!--    调用了uview框架里面的一个弹窗组件-->
		<u-popup
        :mask="false"
        :mask-close-able="false"
		    v-model="show"
		    mode="center"
        class="popup"
        :border-radius="20"
        :negative-top="120"
        width="80%"
        height="45%">
<!--      弹窗页面-->
      <view class="topBar">添加考试
      </view>
      <u-line color="rgb(236, 240, 241)" />
<!--       输入栏界面-->
      <view class="inputPage">
        <ul class="inputList">
          <li>
            <input
                v-model="textData.testCode"
                class="addInformation"
                placeholder="请输入考试码"/>
          </li>
          <li>
            <input
                v-model="textData.studentName"
                class="addInformation"
                placeholder="请输入姓名"/>
          </li>
          <li>
            <input
                v-model="textData.studentNumber"
                class="addInformation"
                placeholder="请输入学号"/>
          </li>
          <li>
            <input
              type="text"
              v-model="textData.majorClass"
              @input="inputes"
              @blur="inputes"
              @focus="showList"
              class="addInformation"
              placeholder="请输入专业班级"/>
          </li>
        </ul>
      </view>
<!--      弹窗底部的两个按钮-->
			<view class="bottomBar">
				<button
            @click="close()"
				    class="buttonFont">取消
        </button>
				<button
            class="buttonFont"
            @click="waitTestStart()"
            style="font-weight: bold">进入考场
        </button>
			</view>
		</u-popup>
<!--    弹窗显示模糊搜索的结果点击将结果写入输入框中-->
    <u-popup
        v-model="show2"
        mode="bottom"
        :mask="false"
        width="80%"
        height="30%">
      <view
          v-for="(item,index) in list"
          :key="index">
        <view class="searchList" @click="getMajorClass(index)">{{item.label}}</view>
        <u-line color="rgb(236, 240, 241)" />
      </view>
    </u-popup>
	</view>
</template>

<script>

import {getTestInformations,getTestListByName,filetestRoom} from "../../api/file";
// import UPopup from "../../components/cmd-progress/cmd-progress.vue";
import UPopup from "@/components/uview-ui/components/u-popup/u-popup.vue";

export default {
  components: {UPopup},
  data() {
			return {
       token:uni.getStorageSync('token'),
       customStyle:'border: 2px solid #3498DB;',
		testLists: [], //存储考试列表数据
		testName:"",    //搜索框动态绑定的考试名
		// testMsg:"",
        textData:{        //添加考试的动态绑定属性
          testCode:'',
          studentName:'',
          studentNumber:'',
          majorClass:''
        },
        show2:false,
				show: false,
        list:[
          {
            label: ''
          }
        ],
          major: [
									{
										label: '计算机科学与技术1班'
									},
									{
										label: '计算机科学与技术2班'
									},
									{
										label: '计算机科学与技术3班'
									},
									{
										label: '计算机科学与技术4班'
									},
									{
										label: '计算机科学与技术5班'
									},
									{
										label: '计算机科学与技术6班'
									},
									{
										label: '大数据与人工智能1班'
									},
									{
										label: '大数据与人工智能2班'
									},
									{
										label: '大数据与人工智能3班'
									},
									{
										label: '信息安全1班'
									},
									{
										label: '信息安全2班'
									},
									{
										label: '信息安全3班'
									},
									{
										label: '物联网工程1班'
									},
									{
										label: '物联网工程2班'
									},
									{
										label: '软件工程1班'
									},
									{
										label: '软件工程2班'
									}
								],
        isGo:false,
			};
		},
		methods:{
		  //系统自带的点击顶部按钮时会执行的函数，作用是打开弹窗
			onNavigationBarButtonTap(e){
				this.show=true;
			},
		//关闭弹窗
			close(){
				this.show=false;
			},
		//点击考试列表项，跳转页面
		clickTestList(item){
			// 点击考试已批改列表项
			if(item.testStatus==2){
        uni.setStorageSync("testCode", item.testId);     //将该考试的testId存储到缓冲区内
				const testCode = item.testId;
				const studentNum = uni.getStorageSync("studentNum");  //取出在login页面保存好的学号
				const msg = {testCode,studentNum };
        filetestRoom(msg).then(res => {   //调用此接口获取paperId
            uni.setStorageSync("paperId", res.data.data.testMsg.paperMsg.paperid);  //保存在缓冲区中
        })
				uni.navigateTo({  //跳转到考试详情页面
					url:"../testDetail/testDetail"
				})
			}
			//点击考试待开始列表项
			else if(item.testStatus==0){
        uni.setStorageSync("testCode", item.testId);     //将该考试的testId存储到缓冲区内
				uni.navigateTo({
					url:"../testRoom/testRoom"
				})
			}
      //点击考试未批改列表项
      else if(item.testStatus==1){
        uni.navigateTo({
          url:"../testSuccess/testSuccess"
        })
      }
		},
      //将模糊化搜索的结果显示
      showList(){
        if (this.textData.majorClass === '') {
          //this.list是下拉框显示的内容，如果为空就展示全部数据
          this.list = this.major
          //否则执行下面内容
        }
        this.show2 = true;
      },
      //将点击之后的值赋给majorClass
      getMajorClass(index){
			  this.textData.majorClass=this.list[index].label;
        this.show2=false;
      },
      // 模糊搜索
      inputes() {
        //首先判断输入框是否为空
        if (this.textData.majorClass === '') {
          //this.list是下拉框显示的内容，如果为空就展示全部数据
          this.list = this.major
          //否则执行下面内容
        } else {
          //先清空展示的数据
          this.list = []
          //然后开始循环全部数据
          for (var i = 0; i < this.major.length; i++) {
            //判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
            if (this.major[i].label.indexOf(this.textData.majorClass) >= 0) {
              console.log(this.major[i].label)
              //然后把它丢进要展示的数组里面
              this.list.push(this.major[i])
              //我这里是必选项为防止用户不选择判断如有数据默认第一个
              if (this.list.length != 0) {
                //在用户选择下拉框内容时会被替换掉
                this.textData.majorClass = this.list[0].label
              }
            }
          }
        }
      },
      //调用接口进入考试页面
      waitTestStart() {
        const testCode = this.textData.testCode;
        const studentNum = this.textData.studentNumber;
        const msg = {studentNum, testCode};
        filetestRoom(msg).then(res => {
          if (res.data.code === 200) {
            console.log("testList根据名字拿到考试列表", res);
            uni.setStorageSync("testCode", testCode);     //将拿到的testCode，studentNum，放入uniApp的缓冲区，防止刷新消失
            uni.setStorageSync("studentNum", studentNum);
            uni.navigateTo({
              url: "../testRoom/testRoom"
            })
            // for (let i=0;i<res.data.data.testList.length;i++)
            // 	this.TestInformations.push(res.data.data.testList[i]);
          } else {
            uni.showToast({
              title: "请检查学生信息是否正确",
              icon: 'none',
              duration: 2000
            })
          }
        })
		},
		// 通过考试名字得到考试列表
		searchTestList(){
		  console.log(this.testName);
      if(this.testName==="") {       //如果搜索框里内容为空，显示默认考试列表
        this.GetTestInformations({token:uni.getStorageSync('token'),classId:uni.getStorageSync('classId')});
      } else{                        //否则根据考试名字进行搜索，将搜索到的考试列表信息添加到已有的考试列表信息
        getTestListByName({token:this.token,testName:this.testName}).then(res=>{
          if(res.data.code===200)
          {
            console.log("testList根据名字拿到考试列表",res);
            //this.testLists = res.data.data.testLists;
            for (let i=0;i<res.data.data.testList.length;i++)
            	this.testLists.push(res.data.data.testList[i]);
          }
          else
          {
            uni.showToast({
              title:"请检查token和考试名称是否正确",
              icon:'none',
              duration: 2000
            })
          }
        })
      }

		},
		//调用接口获取考试列表
		GetTestInformations(student){
			getTestInformations(student).then(res => {
				console.log("testList的页面获取考试列表的res",res);
        this.testLists = res.data.data.testList;
				// for (let i=0;i<res.data.data.testList.length;i++)
				// 	this.TestInformations.push(res.data.data.testList[i]);
				//this.TestInformations=res.data.data.testList;
				console.log("testList页面中是否保存好testLists",this.testLists);
		  })
		},
	},
    onLoad()//监听页面加载  页面只要一重新加载便调用此函数
    {
      //加载考试列表
      this.GetTestInformations({token:uni.getStorageSync('token'),classId:uni.getStorageSync('classId')});
    }
	}
</script>

<style scoped>
.search{
	font-size: 14px;
	color: rgb(204, 204, 204);
	text-align: center;
	border-radius: 30px;
	border: 2px solid #3498DB;
	padding: 3px 2px 3px 2px;
}
.testInformation{
  display: flex;
	width: 100%;
	height: 100rpx;
}
.hadComplete{
  height: 99%;
  width: 15%;
}
.testNameAndTime{
  height: 99%;
  width: 70%;
}
.isFinished{
  height: 99%;
  width: 15%;
  text-align: center;
  line-height: 100rpx;
  color: rgba(51, 51, 51, 0.647);
  font-size: 14px;
}
.popup{
  border: 1px solid rgba(236, 240, 241, 1);
}
.topBar{
  height: 11%;
  width: 100%;
  font-size: 15px;
  padding-top: 1%;
  padding-left:5%;
  line-height: normal;
}
.inputPage{
  height: 76%;
  width: 100%;
}
.inputList{
  height: 100%;
  width: 100%;
  list-style: none;
}
.inputList li{
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: normal;
}
.inputList input{
  text-align: left;
  font-size: 14px;
}
.addInformation{
	height: 65%;
	width: 70%;
	/* color: rgb(236, 240, 241); */
	border: 1.5px solid #3498DB;
	border-radius: 5px;
	font-size: 10px;
	}
.buttonFont{
  height: 90%;
  width: 50%;
  color: rgb(52, 152, 219);
  background-color: white;
  font-size: 14px;
}
.bottomBar{
  height: 13%;
  width: 100%;
  display: flex;
}
.searchList{
  height: 50rpx;
  text-align: center;
  font-size: 14px;
}
</style>
